<template>
  <h1 class="text-lg">新闻咨询</h1>
  <div class="type">
    <h5>用药指导</h5>
    <el-button type="success" plain @click="getNewsInfoListByCategory(1)"
      >家庭常用{{ "\u3000" }}</el-button
    >
    <el-button type="success" plain @click="getNewsInfoListByCategory(2)"
      >肠胃用药{{ "\u3000" }}</el-button
    >
    <el-button type="success" plain @click="getNewsInfoListByCategory(3)"
      >皮肤科药{{ "\u3000" }}</el-button
    >
    <el-button type="success" plain @click="getNewsInfoListByCategory(4)"
      >肝胆用药{{ "\u3000" }}</el-button
    >
    <el-button type="success" plain @click="getNewsInfoListByCategory(5)"
      >呼吸系统{{ "\u3000" }}</el-button
    >
    <el-button type="success" plain @click="getNewsInfoListByCategory(6)"
      >营养滋补{{ "\u3000" }}</el-button
    >
  </div>
  <div class="news" v-for="(item, index) in newsList.list" :key="item.id">
    <div class="title">
      <el-link :href="item.href"
        ><strong>{{ item.title }}</strong></el-link
      >
    </div>
    <div class="synopsis">{{ item.des }}</div>
  </div>
  <div class="page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.current"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { getNewsList } from "../../../api/modules/news";
import { onMounted, reactive, ref } from "vue";

const newsList = reactive({
  list: [
    {
      id: 1,
      title: "title1",
      synopsis: "synopsis",
    },
    {
      id: 2,
      title: "title2",
      synopsis: "synopsis",
    },
    {
      id: 3,
      title: "title3",
      synopsis: "synopsis",
    },
  ],
});
const pageInfo = ref({
  currentPage: 1,
  pageSize: 10,
  category: 1,
});
const total = ref();

const getNewsInfoList = async () => {
  let res = await getNewsList(pageInfo.value);
  total.value = res.data.data.total;
  newsList.list = res.data.data.records;
  console.log((await res).data.data);
};
onMounted(() => {
  getNewsInfoList();
});
const getNewsInfoListByCategory = (val) => {
  pageInfo.value.category = val;
  getNewsInfoList();
  console.log(`类别： ${val} `);
  console.log(pageInfo.value);
};
const handleSizeChange = (val) => {
  pageInfo.value.pageSize = val;
  getNewsInfoList();
  console.log(`每页 ${val} 条`);
};
const handleCurrentChange = (val) => {
  pageInfo.value.currentPage = val;
  getNewsInfoList();
  console.log(`每页 ${val} 条`);
};
</script>

<style lang="scss" scoped>
.type {
  width: 900px;
  margin: 30px auto;
}
.el-button {
  font-size: 20px;
}
.news {
  width: 900px;
  margin: 30px auto;
}
.synopsis {
  color: #8b8b8b;
  font-size: 10px;
  background-color: #eaeaea;
  float: none;
  padding: 20px 22px;
  letter-spacing: 0.3em;
  line-height: 20px;
}
.page {
  width: 900px;
  margin: 30px auto;
}
</style>
